<template>
	<view class="register-container">
		<view class="register-box">
			<view class="title">用户注册</view>
			
			<!-- 账号输入框 -->
			<view class="input-group">
				<text class="label">账号</text>
				<input 
					type="text" 
					v-model="formData.username" 
					placeholder="请输入账号（4-16位字母或数字）"
					@blur="validateUsername"
				/>
				<text class="error-tip" v-if="errors.username">{{errors.username}}</text>
			</view>
			
			<!-- 密码输入框 -->
			<view class="input-group">
				<text class="label">密码</text>
				<input 
					:type="showPassword ? 'text' : 'password'" 
					v-model="formData.password" 
					placeholder="请输入密码（6-20位字母、数字和符号组合）"
					@blur="validatePassword"
				/>
				<text class="password-toggle" @tap="togglePasswordVisibility">
					{{showPassword ? '隐藏' : '显示'}}
				</text>
				<text class="error-tip" v-if="errors.password">{{errors.password}}</text>
			</view>
			
			<!-- 确认密码输入框 -->
			<view class="input-group">
				<text class="label">确认密码</text>
				<input 
					:type="showConfirmPassword ? 'text' : 'password'" 
					v-model="formData.confirmPassword" 
					placeholder="请再次输入密码"
					@blur="validateConfirmPassword"
				/>
				<text class="password-toggle" @tap="toggleConfirmPasswordVisibility">
					{{showConfirmPassword ? '隐藏' : '显示'}}
				</text>
				<text class="error-tip" v-if="errors.confirmPassword">{{errors.confirmPassword}}</text>
			</view>
			
			<!-- 手机号输入框 -->
			<view class="input-group">
				<text class="label">手机号</text>
				<input 
					type="number" 
					v-model="formData.phone" 
					placeholder="请输入手机号"
					maxlength="11"
					@blur="validatePhone"
				/>
				<text class="error-tip" v-if="errors.phone">{{errors.phone}}</text>
			</view>
			
			<!-- 注册按钮 -->
			<button 
				class="register-btn" 
				:disabled="!isFormValid"
				:class="{'register-btn-disabled': !isFormValid}"
				@tap="handleRegister"
			>注册</button>
			
			<!-- 登录链接 -->
			<view class="login-link">
				已有账号？<text class="link" @tap="goToLogin">立即登录</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					username: '',
					password: '',
					confirmPassword: '',
					phone: ''
				},
				errors: {
					username: '',
					password: '',
					confirmPassword: '',
					phone: ''
				},
				showPassword: false,
				showConfirmPassword: false,
				// 正则表达式
				patterns: {
					username: /^[a-zA-Z0-9]{4,16}$/,
					password: /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*])[a-zA-Z\d!@#$%^&*]{6,20}$/,
					phone: /^1[3-9]\d{9}$/
				}
			}
		},
		computed: {
			isFormValid() {
				return !Object.values(this.errors).some(error => error) &&
					this.formData.username &&
					this.formData.password &&
					this.formData.confirmPassword &&
					this.formData.phone;
			}
		},
		methods: {
			// 验证用户名
			validateUsername() {
				if (!this.formData.username) {
					this.errors.username = '请输入账号';
				} else if (!this.patterns.username.test(this.formData.username)) {
					this.errors.username = '账号必须是4-16位字母或数字';
				} else {
					this.errors.username = '';
				}
			},
			
			// 验证密码
			validatePassword() {
				if (!this.formData.password) {
					this.errors.password = '请输入密码';
				} else if (!this.patterns.password.test(this.formData.password)) {
					this.errors.password = '密码必须包含字母、数字和特殊符号，长度8-20位';
				} else {
					this.errors.password = '';
				}
				// 如果确认密码已输入，重新验证
				if (this.formData.confirmPassword) {
					this.validateConfirmPassword();
				}
			},
			
			// 验证确认密码
			validateConfirmPassword() {
				if (!this.formData.confirmPassword) {
					this.errors.confirmPassword = '请确认密码';
				} else if (this.formData.password !== this.formData.confirmPassword) {
					this.errors.confirmPassword = '两次输入的密码不一致';
				} else {
					this.errors.confirmPassword = '';
				}
			},
			
			// 验证手机号
			validatePhone() {
				if (!this.formData.phone) {
					this.errors.phone = '请输入手机号';
				} else if (!this.patterns.phone.test(this.formData.phone)) {
					this.errors.phone = '请输入正确的手机号';
				} else {
					this.errors.phone = '';
				}
			},
			
			// 切换密码显示状态
			togglePasswordVisibility() {
				this.showPassword = !this.showPassword;
			},
			
			// 切换确认密码显示状态
			toggleConfirmPasswordVisibility() {
				this.showConfirmPassword = !this.showConfirmPassword;
			},
			
			// 处理注册
			async handleRegister() {
				// 验证所有字段
				this.validateUsername();
				this.validatePassword();
				this.validateConfirmPassword();
				this.validatePhone();
				
				// 如果表单验证通过
				if (this.isFormValid) {
					try {
						// 这里添加注册请求
						const response = await uni.request({
							url: 'http://localhost:8080/user/register',
							method: 'POST',
							data: {
								username: this.formData.username,
								password: this.formData.password,
								phone: this.formData.phone
							}
						});
						
						if (response.statusCode === 200) {
							uni.showToast({
								title: '注册成功',
								icon: 'success'
							});
							// 注册成功后跳转到登录页
							setTimeout(() => {
								this.goToLogin();
							}, 1500);
						} else {
							uni.showToast({
								title: response.data.message || '注册失败',
								icon: 'none'
							});
						}
					} catch (error) {
						uni.showToast({
							title: '注册失败，请稍后重试',
							icon: 'none'
						});
					}
				}
			},
			
			// 跳转到登录页
			goToLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			}
		}
	}
</script>

<style>
.register-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding: 40rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.register-box {
	width: 100%;
	background-color: #ffffff;
	border-radius: 20rpx;
	padding: 40rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.title {
	font-size: 40rpx;
	font-weight: bold;
	text-align: center;
	margin-bottom: 60rpx;
	color: #333;
}

.input-group {
	margin-bottom: 30rpx;
	position: relative;
}

.label {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 10rpx;
	display: block;
}

input {
	width: 100%;
	height: 88rpx;
	background-color: #f8f8f8;
	border-radius: 44rpx;
	padding: 0 40rpx;
	font-size: 28rpx;
	box-sizing: border-box;
	border: 2rpx solid #eee;
}

.error-tip {
	color: #ff4d4f;
	font-size: 24rpx;
	margin-top: 10rpx;
	display: block;
	padding-left: 20rpx;
}

.password-toggle {
	position: absolute;
	right: 30rpx;
	top: 50%;
	transform: translateY(-50%);
	font-size: 24rpx;
	color: #666;
	padding: 10rpx;
}

.register-btn {
	width: 100%;
	height: 88rpx;
	background-color: #007AFF;
	color: #ffffff;
	border-radius: 44rpx;
	font-size: 32rpx;
	margin-top: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.register-btn-disabled {
	background-color: #cccccc;
}

.login-link {
	text-align: center;
	margin-top: 30rpx;
	font-size: 28rpx;
	color: #666;
}

.link {
	color: #007AFF;
	margin-left: 10rpx;
}

/* 输入框获得焦点时的样式 */
input:focus {
	border-color: #007AFF;
	background-color: #ffffff;
}

/* 按钮点击效果 */
.register-btn:active {
	opacity: 0.8;
}
</style>
